<template>
  <div class="rosePie"></div>
</template>

<script>
import { getCategorySale } from '@/api/echart'
import * as echarts from 'echarts'

export default {
  name: 'RosePie',
  data() {
    return {
      rosePieData: []
    }
  },
  mounted() {
    this.getCategoryData()
  },
  methods: {
    //获取分类销量冠军
    getCategoryData() {
      getCategorySale().then(res => {
        this.setNewData(res.data)
        this.setRosePie()
      })
    },
    //创建一个新的data数组
    setNewData(item) {
      for (let i = 0; i < item.length; i++) {
        let config = { name: '', value: '' }
        config.name = item[i].name
        config.value = item[i].pay_sum
        this.rosePieData.push(config)
      }
    },
    //配置玫瑰饼图
    setRosePie() {
      let a = { width: 530, height: 530 }
      let chartDom = document.querySelector('.left_box')
      let myChart = echarts.init(chartDom, a)
      let option = {
        title: {
          text: '分类销售榜',
          left: 'center',
          top: '5%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: '30%'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['45%', '40%'],
            data: this.rosePieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)

    }
  }
}
</script>

<style>
</style>
